<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'partmap.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px;" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
const emptyData = {
  version: '',
  erp_create_date: '',
  erp_modify_date: '',
}
export default {
  mixins: [commonMixin],
  name: 'partmap',
  data: function () {
    return {
      name: '客户料号',
      api: this.$api.partmap,
      pageLoading: false,
      submitLoading: false,
      query: {
        page: 1,
        size: 10,
      },
      list: [],
      total: 0,
      data: { ...emptyData },
      editFormVisible: false,
      columns: [
        { title: '客户料号', key: 'cust_pn_code', width: 140 },
        { title: '客户料名', key: 'cust_pn_name', width: 140 },
        { title: '物料规格', key: 'cust_pn_specification', width: 180 },
        { title: '客户编码', key: 'cust_code', width: 90 },
        { title: '客户名称', key: 'cust_name' },
        { title: '产品型号/物料编号', key: 'sku_no', width: 130 },
        { title: '产品型号名称', key: 'sku_name', width: 100 },
        { title: '第三方料号', key: 'kpn_condition', width: 100 },
        { title: '属性1', key: 'property', width: 90 },
        { title: '属性2', key: 'property2', width: 90 },
        { title: '属性3', key: 'property3', width: 90 },
        { title: '版本', key: 'version', width: 90 },
        { title: '备注', key: 'remarks', width: 90 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '客户料号',
          span: 12,
          key: 'cust_pn_code',
        },
        {
          title: '客户料名',
          span: 12,
          key: 'cust_pn_name',
        },
        {
          title: '物料规格',
          span: 24,
          key: 'cust_pn_specification',
        },
        {
          title: '客户',
          span: 24,
          key: 'cust_id',
          name: 'select',
          options: [],
          events: {
            focus: this.custFocus,
          },
          props: {
            placeholder: '输入客户',
            filterable: true,
            remote: true,
            remoteMethod: this.custOption,
          },
        },
        {
          title: '产品/物料',
          span: 24,
          key: 'material_id',
          name: 'select',
          options: [],
          events: {
            focus: this.focusMater,
          },
          props: {
            placeholder: '输入料号或名称筛选',
            filterable: true,
            remote: true,
            remoteMethod: this.getMaOptions,
          },
        },
        {
          title: '第三方料号',
          span: 24,
          key: 'kpn_condition',
        },
        {
          title: '属性1',
          span: 24,
          key: 'property',
        },
        {
          title: '属性2',
          span: 24,
          key: 'property2',
        },
        {
          title: '属性3',
          span: 24,
          key: 'property3',
        },
        {
          title: '版本',
          span: 24,
          key: 'version',
        },
        {
          title: '备注',
          span: 24,
          key: 'remarks',
          name: 'textarea',
        },
      ],
    }
  },
  methods: {
    submit: function () {
      this.submitLoading = true
      // let url = this.api + (this.data.id ? 'update' : 'add')
      let url = this.api + 'add'
      this.$request(url, this.data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.editFormVisible = false
          this.getList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    focusMater() {
      let tmp = this.fields.find((i) => i.key == 'material_id')
      if (!tmp.options.length) this.getMaOptions(' ')
    },
    getMaOptions(query) {
      this.setFieldOptions('material_id', [])
      this.$request(this.$api.mat + 'getmatandsku', {
        queryString: query,
      })
        .then((r) => {
          this.setFieldOptions('material_id', r, 'id', ['key_part_no', 'key_part_name'])
        })
        .catch(() => {})
    },
    formatAfterGet(data) {
      //依据实际需求处理
      let tmp = _.cloneDeep(data)
      this.singleOption(data.material_id)
      this.custOptionOne(data.cust_id)
      return tmp
    },
    singleOption(val) {
      if (val) {
        this.$request(this.$api.mat + 'getmatandsku', {
          id: val,
        })
          .then((r) => {
            this.setFieldOptions('material_id', r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      } else {
        let tmp = this.fields.find((i) => i.key == 'material_id')
        tmp.options = []
      }
    },
    custFocus() {
      let tmp = this.fields.find((i) => i.key == 'cust_id')
      if (!tmp.options.length) this.custOption(' ')
    },
    custOption(val) {
      this.setFieldOptions('cust_id', [])
      this.$request(this.$api.custom + 'getlist', {
        queryString: val,
      })
        .then((r) => {
          this.setFieldOptions('cust_id', r.list, 'id', ['cust_code', 'cust_name'])
        })
        .catch(() => {})
    },
    custOptionOne(val) {
      this.setFieldOptions('cust_id', [])
      this.$request(this.$api.custom + 'getbyid', {
        id: val,
      })
        .then((r) => {
          this.setFieldOptions('cust_id', [r], 'id', ['cust_code', 'cust_name'])
        })
        .catch(() => {})
    },
  },

  created: function () {
    this.getList()
  },
}
</script>

<style scoped>
</style>
